<style scoped>
#login .logo {
  text-align: center;
  font-size: 40px;
  line-height: 100px;
  font-family: "宋体";
  font-weight: 700;
  color: #ff6600;
}
#login .content {
  margin-top: 20px;
}
#login .txt {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
}
#login .txt > a {
  color: #ff6600;
}
#login .msg {
  padding: 10px 16px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
#login .register {
  margin-top: 30px;
  color: #ff6600;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}
</style>
<template>
  <div id="login" class="fixed">
    <van-nav-bar title="登录" left-arrow @click-left="$router.go(-1)" />
    <div class="logo">趣拉拉</div>
    <van-tabs v-model="active" type="card">
      <van-tab title="用户">
        <div class="content">
          <van-field
            v-model="newTel"
            maxlength="11"
            type="tel"
            label="手机号"
            placeholder="请输入手机号码"
          />
          <van-field
            v-model="sms"
            center
            clearable
            maxlength="4"
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="sendNewVerificationCode"
                :disabled="newSetTimeOutBool"
                >{{ newSeconds ? newSeconds + "s" : "发送验证码" }}</van-button
              >
            </template>
          </van-field>
          <van-button
            color="#FF6600"
            style="width: 90%; margin: 0 auto"
            type="primary"
            block
            :disabled="sms.length == 4 ? false : true"
            @click="confirm"
            >确定</van-button
          >
          <div class="txt">
            登录即表示同意<a href="javascript:;">趣拉货用户协议</a>
          </div>
        </div>
      </van-tab>
      <van-tab title="司机">
        <div class="content">
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="手机号"
              label="手机号"
              maxlength="11"
              type="tel"
              placeholder="请输入手机号码"
              :rules="[{ required: true }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              maxlength="16"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true }]"
            />
            <div class="msg">
              <div class="remember">
                <van-checkbox v-model="checked" shape="square" icon-size="14px"
                  >记住密码</van-checkbox
                >
              </div>
              <div class="forget">
                <a href="javascript:;">忘记密码?</a>
              </div>
            </div>
            <div style="margin: 16px">
              <van-button block color="#FF6600" type="info" native-type="submit"
                >确定</van-button
              >
              <div class="txt">
                登录即表示同意<a href="javascript:;">趣拉货用户协议</a>
              </div>
              <div class="register">
                <span @click="register"
                  >注册成为趣拉货司机<van-icon name="arrow"
                /></span>
              </div>
            </div>
          </van-form>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from "vant";
import { login } from "../api/user";
export default {
  data: () => ({
    active: 0,
    sms: "",
    newSeconds: "",
    newSetTimeOutBool: false,
    newTime: null,
    newNum: 10,
    interlayer: false,
    newTel: "",
    username: "",
    password: "",
    checked: true,
  }),
  methods: {
    //   注册
    register() {
      console.log("注册");
      this.$router.push({ name: "dri_reg" });
    },
    onSubmit(values) {
      console.log("submit", values);
      Toast.success('登录成功!');
      setTimeout(()=>{
        this.$router.push('/driver_lobby');
      },100)
    },
    // 确定
    async confirm() {
      let { newTel, sms } = this;
      let data = await login({ tel: newTel, sms });
      let return_msg = data.data.data;
      this.$store.commit("setUserPayTypeWX", return_msg.pay_type.wx);
      this.$store.commit("setUserPayTypeZFB", return_msg.pay_type.zfb);
      this.$store.commit("setUserName", return_msg.username);
      this.$store.commit("setUserSex", return_msg.sex);
      this.$store.commit("setUserHeadPhoto", return_msg.head_photo);
      this.$store.commit("setUserPhone", return_msg.phone);
      Toast.success("登录成功!");
    //   本地存储token
    window.localStorage.setItem('user_token',JSON.stringify(return_msg));
      setTimeout(() => {
        this.$router.push("/");
      }, 500);
    },
    // 发送验证码new
    sendNewVerificationCode() {
      this.newSetTimeOutBool = true;
      if (this.newSetTimeOutBool) {
        console.log("可以计时了");
        let { newNum } = this;
        this.newSeconds = newNum;
        this.time = setInterval(() => {
          --newNum;
          if (newNum < 1) {
            this.newSetTimeOutBool = false;
            clearInterval(this.time);
            this.newSeconds = "";
          }
          this.newSeconds = newNum;
          console.log(newNum);
        }, 1000);
      }
    },
  },
};
</script>